<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  原来的数组-->{{nums}}<br>
  小于100后过滤的数组-->{{useFilter()}}<br>
  乘以2的数组-->{{useMap()}}<br>
  乘以2以后的各元素的和的数组-->{{useReduce()}}<br>
  三种函数连用-->{{useOnceCount()}}<br>
  一行代码-->{{useOnceRowCount()}}<br>
</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "Hello zk I am Vue !",
      nums:[10, 20, 30, 40, 50, 60, 70]
    },
    //filter map reduce 讲解
    /*
    filter
    返回一个布尔值 必须
    返回true 函数内部添加回调的值加入数组中
    返回false 不加入
     */
    methods:{
      useFilter() {
        let newNums = this.nums.filter(function (n) {
          //当n小于100是加入数组中
          return n < 100
        })
        return newNums
      },
      useMap() {
        //将newNums中每个数字×2
        let new2Nums = this.useFilter().map(function (n) {
          return n * 2
        })
        return new2Nums
      },
      //作用：对数组中所有的内容进行汇总(相加，相乘等等)
      useReduce() {
        let total = this.useMap().reduce(function (preValue, n) {
          return preValue + n
        }, 0)
        return total
      },
      useOnceCount() {
        let total = this.nums.filter(function (n) {
          return n < 100
        }).map(function (n) {
          return n * 2
        }).reduce(function (preValue, n) {
          return preValue + n
        }, 0)
        return total
      },
      useOnceRowCount() {
        let total = this.nums.filter(n => n < 100).map(n => n * 2).reduce((preValue, n) => preValue + n)
        return total
      }
    }
  })
</script>
</body>
</html>
